<template>
  <div class="c-bg-sgray" v-if="topData">
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div class="teaHeadbg c-pt40 c-p c-flex-column c-alignc-sb">
      <div class="c-ph24">
        <div class="c-flex-row c-justify-sb c-aligni-center" @click="clickGoClockDetail">
          <div class="c-fs32 c-fw600 c-fc-white c-ww540 c-text-ellipsis1">{{topData.name}}</div>
          <span class="iconfont c-fs24 c-fc-sgray">&#xe635;</span>
        </div>
        <div class="c-fs22 c-fc-white c-opacity70 c-mt14" v-if="workType == 1">打卡时间：{{topData.startTime}} 至 {{topData.endTime}}</div>
      </div>
      <div class="c-flex-row c-justify-sb c-aligni-center c-pl24 c-mt14">
        <div class="c-flex-row c-justify-center c-aligni-center">
          <div class="c-flex-row c-mr20" v-if="topData.studentList.length > 0">
            <div class="c-ww36 c-hh36 c-brp50 c-text-hidden c-bg-white"
              v-for="(item, index) in topData.studentList" :key="index" v-if="index < 3" :class="index != 0?'c-ml-4':''">
              <img class="c-bd1-white c-ww36 c-hh36 c-brp50 c-text-hidden" :src="$addXossFilter(item.headimgurl,require('@/assets/defult_head.png'))" alt="" />
            </div>
            <div class="c-ww36 c-hh36 c-brp50 c-text-hidden c-bg-white c-ml-4">
              <img class="c-bd1-white c-ww36 c-hh36 c-brp50 c-text-hidden" :src="$addXossFilter(require('@/assets/i/wap/clockIn/iconHead.png'))" alt="" />
            </div>
          </div>
          <div class="c-fs22 c-fc-white c-flex-row c-justify-center c-aligni-center">{{topData.studentNum}} 人参与打卡 ｜ {{topData.submitNum}} 次打卡</div>
        </div>
        <div class="c-flex-row c-justify-center c-aligni-center c-translucent-balck30 c-pl16 c-pv10 c-pr12 c-br-tl24 c-br-bl24" @click="clickInviteFriend">
          <div class="iconfont c-fs28 c-fc-white">&#xe632;</div>
          <div class="c-fs20 c-fc-white c-ml4">邀请好友</div>
        </div>
      </div>
      <div class="c-flex-row c-aligni-center c-justify-sa c-hh100 c-w100 c-translucent-balck30 c-mt36">
        <div class="c-flex-column c-justify-center c-aligni-center" @click="clickGoRank">
          <div class="iconfont c-fs36 c-fc-white c-mb8">&#xe734;</div>
          <div class="c-fs20 c-fc-white">排行榜</div>
        </div>
        <div v-if="workType == 1" class="c-flex-column c-justify-center c-aligni-center" @click="clickGoCalendar">
          <div class="iconfont c-fs36 c-fc-white c-mb8">&#xe626;</div>
          <div class="c-fs20 c-fc-white">日历</div>
        </div>
        <div class="c-flex-column c-justify-center c-aligni-center" @click="clickGoTottal">
          <div class="iconfont c-fs36 c-fc-white c-mb8">&#xe732;</div>
          <div class="c-fs20 c-fc-white">打卡统计</div>
        </div>
      </div>
    </div>
    <div class="c-bg-white c-flex-row c-aligni-center c-pl24 c-pv14 c-bgTittle c-p" v-if="enableBanner">
      <div class="iconfont c-fs20 c-fc-FF2F0B c-mr8">&#xe6ad;</div>
      <div class="c-fs20 c-fc-FF2F0B">简化操作，提高学习效率！就使用创匠打卡小程序参与打卡！</div>
      <div class="iconfont c-fs20 c-fc-FF2F0B">&#xe635;</div>
      <div v-if="enableCenter">
        <div class="open-tag-wrap" v-if="isSupport">
          <wx-open-launch-weapp
            class="launch-btn"
            :appid="`${appid}`"
            :username="username"
            :path="`${path}?${wxappQuery}`"
            @error="handleErrorFn"
            @launch="handleLaunch"
          >
            <script type="text/wxtag-template">
              <!-- 这里是为了撑开元素，让其可以被点击，不添加template会报错，添加了template不添加内容也会报错 -->
              <div style="padding: 10000px">
              </div>
            </script>
          </wx-open-launch-weapp>
        </div>
        <div v-else class="open-tag-wrap" @click="clickGoWxApp"></div>
      </div>
    </div>
    <div class="c-flex-row c-justify-sb c-aligni-center">
      <div class="c-flex-row c-fs28 c-fc-gray c-textAlign-c">
        <div class="c-ph24 c-mt30 c-mb30 c-p c-lh28" v-for="(item, index) in tabList" :key="index" @click="tabtag(index)" :class="tabIndex == index ? 'c-fc-xblack c-fw600' : ''">
          {{item.name}}
          <div class="c-hh16 c-ww72 theme-bg-50 c-pa c-br8 c-p-l0 c-p-r0 c-center c-p-b-6" v-if="tabIndex == index"></div>
        </div>
      </div>
      <div class="c-fs22 c-fc-sblack c-pr24">{{workType==2?"全部作业(" + topData.homeworkNum + ")":workType==3?"全部关卡(" + topData.homeworkNum +")":""}}</div>
    </div>
    <div v-if="tabIndex == 0">
      <div class="c-ph24">
        <div class="c-flex-row c-aligni-center c-justify-sb c-p c-ph24 c-pv14 theme-bg-gradient18002 c-br20">
          <new-clock-search-bar :isShowbutton="true" :placeholder="'请输入关键字搜索'"  :selectList="selectList" @search="startSearch"></new-clock-search-bar>
          <div class="c-flex-row c-aligni-center c-justify-center c-fs22 c-fc-sblack">
            <div class="c-flex-row c-flex-center c-ml10" @click="clockSearchShow">
              {{day != "" || sortType !='' || startTime !='' || endTime !='' || classId !='' ? '筛选' : '全部' }}
              <span class="iconfont c-fs18 c-fc-sblack c-ml4 c-inlineblack">&#xe601;</span>
            </div>
          </div>
        </div>
        <div class="c-bg-white c-br20 c-pt20 c-pb24 c-mt20 c-p" v-for="(item, index) in studentWorkList" :key="index" @click.stop="goStuAnswerResult(item)">
          <i v-if="item.examType == 3" class="iconfont c-pa c-p-t0 c-fs c-p-r24 c-fs24 c-p-r100 c-fc-green">&#xe829;</i>
          <div v-if="item.enableShow==0&&isDisCheat==2" class="c-fs48 theme-fc iconfont icon-biaoqianx c-pa onlyIcon">
            <div class="c-fc-white c-fs18 c-pa c-p-t5 c-p-l20">仅老师可见</div>
          </div>
          <div class="c-flex-row c-aligni-center c-pl20 c-p">
            <img class="c-ww60 c-hh60 c-brp50" @click.stop="clickGoStudyHistory(item.userId)" :src="$addXossFilter(item.headimgurl, require('../../../assets/defult_head.png'))" alt="" />
            <div class="c-pl20 c-flex-grow1 c-w0 c-pr24">
              <div class="c-fs24 c-flex-row c-aligni-center c-justify-sb">
                <div class="c-flex-row">
                  <span class="c-pr20 c-maxw160 c-text-ellipsis1 c-fs20 c-fw600">{{ item.nickname }}</span>
                  <span v-if="item.isTop" class="c-fs18 c-ww60 c-flex-row c-lh c-flex-center theme-bg c-fc-white c-br6 c-mr12">置顶</span>
                  <span v-if="item.isHot" class="c-fs18 c-ww60 c-flex-row c-lh c-flex-center theme-fc theme-bd1 theme-bg-10 c-br6">精选</span>
                </div>
              </div>
              <div class="c-flex-row c-aligni-center c-justify-sb c-pt12">
                <div v-if="item.type == 1 && item.rank !== null&& item.rank!=0" class="c-flex-row c-aligni-center">
                  <div v-if="item.type == 1 && item.rank !== null" class="c-flex-row c-flex-center">
                    <img v-for="index in 5" :key="index" class="c-ww24 c-hh24 c-mr4" :src="
                      index <= item.rank
                        ? require('@/assets/i/wap/clockIn/star_s.png')
                        : require('@/assets/i/wap/clockIn/star_d.png')
                    " alt="" />
                  </div>
                  <span v-if="item.type == 1 && item.rank !== null && item.rank!=0" class="theme-fc c-pl10 c-pr10 c-fs20">{{ item.rank * 20 }}分</span>
                </div>
                <div v-if="workType == 1" class="c-fs18 c-fc-gray">
                  已打卡{{ item.finishNum }}天
                </div>
                <div v-else-if="workType == 2" class="c-fs18 c-fc-gray">
                  已完成{{ item.finishNum }}个作业
                </div>
                <div v-else class="c-fs18 c-fc-gray">
                  已打卡{{ item.finishNum }}课时
                </div>
              </div>
            </div>
          </div>
          <clock-aswer-content
            @clickCom="clickCom"
            @clickZan="clickZan"
            @clickPlayAudio="clickPlayAudio"
            @clickShowVideo="clickShowVideo"
            :isAnalyze="0"
            :playAduioSrc="playAduioSrc"
            :homeworkType="item.type"
            :aswerInfo="item"
            :aswerIndex="index"
            :isTeacher="topData.isTeacher">
          </clock-aswer-content>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无打卡日记"></loading-status-tem>
      </div>
    </div>
    <div v-if="tabIndex == 1" class="c-ph24">
      <div class="theme-bg-gradient18002 c-ph20 c-pv20 c-br20" v-if="workType == 1&&homeWorkList&&homeWorkList.length != 0">
        <div v-for="(item, index) in homeWorkList" :key="index" @click="goToDiary(item)">
          <div class="c-mt20 c-pv30 c-ph20 c-bg-white c-br20 c-p c-text-hidden">
            <div class="c-fs28 c-fc-xblack c-text-ellipsis1">{{item.name}}</div>
            <div class="c-mt18 c-fs20 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
              <div>{{item.startDay}}</div>
              <div>{{item.hasMan}}人打卡</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="workType == 2">
        <div @click="goToDiary(item)" class="c-bg-white c-pt30 c-pb20 c-ph30 c-mb20 c-br20" v-for="(item,index) in homeWorkList" :key="index">
          <div class="c-bd-b1 c-flex-row c-aligni-center c-pb30">
            <div class="c-flex-grow1 c-w0">
              <div class="c-fs26 c-text-ellipsis2">{{item.name}}</div>
              <div class="c-fs22 c-pt20 c-lh c-fc-gray">
                <span>题型：</span>
                <span>{{typeQueMap[item.type]}}</span>
              </div>
              <div v-if="mainData.isTeacher != 1" class="c-fs22 c-pt20 c-lh">
                <span class="c-fc-gray">状态：</span>
                <span :class="item.isStart == 0 ? 'c-fc-sgray' : item.status == 1 ? 'c-fc-green':'theme-fc'">{{item.isStart == 0 ? '未开始' : item.status
                  == 1 ? '已完成':'未完成'}}</span>
              </div>
              <!-- <div v-else class="c-fs20 c-pt20 c-lh">
                <span class="c-fc-gray">已提交：</span>
                <span class="theme-fc">{{`${item.hasMan || 0}人`}}</span>
              </div> -->
            </div>
            <div class="c-flex-row c-flex-center c-pl20">
              <span class="iconfont c-fs28 c-fc-sgray">&#xe908;</span>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-sb c-fc-gray c-fs22 c-pt20">
            <div class="c-flex-row c-aligni-center">
              <i class="iconfont icon-shizhong c-fs20 c-mr12"></i>
              <span :class="item.isExpire == 1 ? 'c-fc-gray':''">{{item.startTime}} 至 {{item.endTime}}</span>
            </div>
            <span class="c-fc-sblack">{{item.hasMan}}人已完成</span>
          </div>
        </div>
      </div>
      <div v-if="workType == 3">
        <div class="theme-bg-gradient18002 c-ph20 c-pv20 c-br20">
          <div class="c-mt20 c-pv30 c-ph20 c-bg-white c-br20" v-for="(item,index) in homeWorkList" :key="index" @click="goToDiary(item)">
            <div class="c-fs28 c-fc-xblack c-text-ellipsis1">第{{item.reorder}}课时</div>
            <div class="c-mt16 c-fs20 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
              <div>{{item.hasMan}}人已完成</div>
            </div>
          </div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无记录"></loading-status-tem>
    </div>
    <div v-if="tabIndex == 2" class="c-ph24">
      <div class="c-bg-white c-pt40 c-br20 c-text-hidden" v-if="pupilList.length > 0">
        <div class="c-ph22 c-pb40 c-bg-white c-flex-row c-aligni-center" v-for="(item, index) in pupilList" :key="index">
          <img class="c-ww68 c-hh68 c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="" />
          <div class="c-fs20 c-fc-gray c-flex-column c-flex-grow1 c-ml20">
            <div class="c-fs24 c-fc-xblack">{{item.nickname}}{{item.realName ? '(' + item.realName + ')' : ''}}</div>
            <div class="c-mt6">{{item.createdAt}}加入</div>
          </div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无记录"></loading-status-tem>
    </div>
    <!-- 视频播放器 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
    <!-- 切换身份 -->
    <div v-if="topData.isTeacher == 1 || topData.isTeacher == 2" class="c-box-shadow9 c-flex-row c-ph24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white">
      <div class="c-hh64 c-fs26 c-flex-column c-aligni-center c-fc-white c-justify-sa theme-bg c-w100 c-br32" :class="isShowClockSearch? 'c-pz-1' : ''" @click="clickChangeRole">切换{{ topData.isTeacher == 1 ? "学员" : "教师" }}</div>
    </div>
    <clock-search :workType='workType' @sureSearch='sureSearch' :clockInId="clockInId" :isShowClockSearch="isShowClockSearch" @clockSearchHide="clockSearchHide"></clock-search>
    <clock-tea-comment-com :enHwId="enHwId" :clockInId="clockInId" @clickAddMusic="clickAddMusic" :curSelectDate="curSelectDate" :curId="topData.hwId"
      :enDate="enDate" :teacher="1" :enableLongAudio='enableLongAudio' :playAduioSrc="playAduioSrc" :showTeaCommentModal="showTeaCommentModal" :workType="workType" :resultIndex="resultIndex" :resultInfo="resultInfo" :imgData="imgData"
      @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-tea-comment-com>
    <!-- 非教师评论 -->
    <clock-comment-com :enHwId="enHwId" :clockInId="clockInId"
      :enDate="enDate" :enableLongAudio='enableLongAudio' @clickShowVideo="clickShowVideo" :comType="comType" :isTeacher="topData.isTeacher" :playAduioSrc="playAduioSrc" :showCommentModal="showComInput" :inputCom="inputCom" :replyName="replyName"
      :curComId="curComId" :replyId="replyId" :commentId='commentId' :imgData="imgData" @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-comment-com>
    <clock-go-wx :showAialogPop="showAialogPop" :clockInInfo="topData" @closeAialogPop="closeAialogPop"></clock-go-wx>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import clockAswerContent from "@/components/templates/clockIn/clockAswerContent.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import clockTeaCommentCom from "@/components/templates/clockIn/clockTeaCommentCom.vue";
import {
  utilJs
} from "@/utils/common.js";
import NewClockSearchBar from "@/components/templates/common/newClockSearchBar.vue";
import clockSearch from "@/components/templates/clockIn/clockSearch.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import clockCommentCom from "@/components/templates/clockIn/clockCommentCom.vue";
import clockGoWx from "@/components/templates/clockIn/clockGoWx.vue";
let isLoading = false;
let LIMIT = 10
let curComIndex = ""; //当前评论的下标
let hasRead = '';//推送来源
export default {
  name: "TeaHomeWorker",
  components: {
    loadingStatusTem,
    NewClockSearchBar,
    clockSearch,
    videoPopup,
    clockTeaCommentCom,
    clockAswerContent,
    clockCommentCom,
    clockGoWx
  },
  props: [],
  data() {
    return {
      curScollTop:0,
      curScollTopFlag:true,
      enHwId:'',
      enDate :'',
      typeQueMap: {
        1: "简答题",
        2: "非简答题",
        3: "AI语音",
        4: "非简答题",
        5: "非简答题"
      },
      dataStatus: 'HAS_MORE_DATA',
      isTeacher: 0,
      hasBreak: 0,
      allWorkNum: 0,
      selectList: [["昵称", "内容"]],
      tabList: [
        {name:"日记"},
        {name:"主题"},
        {name:"成员"}
      ],
      tabIndex: 0,
      isShowClockSearch:false,
      workType:1,
      clockInId:'',
      bindPhoneSetting: null,
      topData:null,
      page:1, //页数
      day:'', //是打卡日期,
      hwId:'',
      sortType:'', //是否点评 1已点评 2未点评 3精选 4非精选
      sort:'', //1打卡时间降序 2打卡升序 3被点评数降序 4被点评升序  5被点赞数降序 6被点赞数升序
      type:'', //1已打卡 2未打卡学员
      startTime:'', //开始时间
      endTime:'', //结束时间
      classId:'', //分组id
      searchType:'', //搜索类型 1=用户 2=打卡内容
      searchName:'', //搜索的内容
      studentWorkList:[],
      playAduioSrc: "",
      resultInfo: {},
      resultIndex: -1,
      showTeaCommentModal: false, //显示教师评论输入框
      showVideo: false, //显示视频播放器
      currentVideoObj: {},
      imgData: {},
      replyName: "", //回复人的ID
      inputCom: "", //评论的输入内容
      replyId: "", //回复人的昵称
      pupilList: [], //成员列表
      curSelectDate:'',
      homeWorkList:[], //主题作业列表
      commentId:'',
      showComInput:false,
      comType: 1, //是否教师评论教师
      showAialogPop : false, //是否弹窗提醒：true=是；false=否
      enableBanner: 0, //是否横幅提醒：1=是；0=否
      enableCenter:0, //是否互动入口跳转小程序：1=是；0=否
      appid:'wxc99b13f1a0b51048',
      wxappQuery: "",
      path:'/pages/clockIn/homeWorker/index',
      isSupport:false,
      first:0,
      isDisCheat:0,
      enableLongAudio:0
    };
  },
  beforeRouteLeave(to, from, next) {
    //当有评论弹窗的时候，后退就关闭弹窗,因为后退会把history历史栈后退一个，所以要添加回去
    if (
      (this.showComInput || this.showTeaCommentModal || this.showVideo) &&
      to.path != "/" &&
      to.path != "/homePage/spread/spreadIndex" &&
      to.path != "/member/vip/vipUpNew"
    ) {
      this.showTeaCommentModal = false;
      this.showComInput = false;
      if (this.showVideo) {
        this.showVideo = false;
      }
      history.pushState(
        null,
        null,
        `${window.location.href.split("#")[0]}#${from.fullPath}`
      );
    } else {
      next();
    }
  },
  created() {
    utilJs.appShare(this);
    this.isSupport = localStorage.getItem('isWxApp') != 1;
  },
  mounted() {
  },
  methods: {
    getBaseConfig() {
      let postUrl = `${global.apiurl}signCard/getBaseConfig?signColId=${this.clockInId}`;
      utilJs.getMethod(postUrl, (res) => {
        this.isDisCheat = res.isDisCheat
        this.enableLongAudio = res.enableLongAudio
      });
    },
    clickGoWxApp() {
      let fullPath = `${this.path}?${this.wxappQuery}`;
      let query = `?appId=${this.appid}&path=${encodeURIComponent(JSON.stringify(fullPath))}`;
      utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
    },
    closeAialogPop() {
      this.showAialogPop = false
    },
    appletInletInfo() {
      utilJs.getMethod(
        `${global.apiurl}signCard/appletInletInfo?signColId=` + this.clockInId,
        (res) => {
          if (!utilJs.isWeiXin()) {
            return
          }
          // enablePop是否弹窗提醒：1=是；0=否
          if (res.enablePop == 1 && res.enableAppletRemind == 1) {
            this.showAialogPop = true
          }
          this.first = 1
          // enableBanner是否横幅提醒：1=是；0=否
          this.enableBanner = res.enableBanner
          // enableCenter是否个人中心进入打卡小程序：1=是；0=否
          this.enableCenter = res.enableCenter
        }
      );
    },
    //学习记录
    clickGoStudyHistory(userId) {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/studyHistory",
        query: {
          clockId: this.clockInId,
          userId: userId || this.topData.userId,
          isMe: !userId
        }
      });
    },
    cleanPlayAudioUrl() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    goToDiary(clockInfo) {
      console.log(clockInfo)
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/homeworkDiary",
        query: {
          workType: this.workType,
          clockInId: this.clockInId,
          curTime:this.curSelectDate,
          hwId: this.workType != 1 ? clockInfo.hwId : '',
          startDay: this.workType == 1 ? (this.topData.isSingleTheme == 2 ? clockInfo.startDay.split(' ')[0] : '') : ''
        }
      });
    },
    // 获取头部打卡信息
    topDetail() {
      let getUrl = `signCard/topDetail/${this.clockInId}?hasRead=${hasRead}`
      utilJs.getMethod(
        global.apiurl + getUrl,
        (res) => {
          console.log(res)
          if (res.length == 0) {
            this.$routerGo(this, "replace", {
              path: "/homePage/clockIn/clockInDetail",
              query: {
                clockInId: this.clockInId
              }
            });
          }
          this.workType = res.type
          this.topData = res
          if (this.workType == 1 ) {
            this.tabList = [
              {name:"日记"},
              {name:"主题"},
              {name:"成员"}
            ]
          } else if (this.workType == 2 ) {
            this.tabList = [
              {name:"日记"},
              {name:"作业"},
              {name:"成员"}
            ]
          } else if (this.workType == 3 ) {
            this.tabList = [
              {name:"日记"},
              {name:"课时"},
              {name:"成员"}
            ]
          }
          if (this.first == 0) {
            this.appletInletInfo()
          }
          switch (this.topData.type) {
            case 1:
              //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
              let startTimeTamp = new Date(`${this.topData.startTime} ${this.topData.startHour}`.replace(/-/g, "/")).getTime();
              let endTimeTamp = new Date(`${this.topData.endTime} ${this.topData.endHour}`.replace(/-/g, "/")).getTime();
              let nowTimeTamp = new Date().getTime();
              let curTime = utilJs.dateFormat(nowTimeTamp);
              if (this.topData.isSingleTheme == 2) {
                curTime = this.topData.startDay ? this.topData.startDay.split(' ')[0] : ''
              } else {
                //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
                if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
                  curTime = this.topData.startTime;
                }
              }
              this.curSelectDate = curTime
              this.wxappQuery = `workType=1&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.topData.signColId}&curSelectDate=${curTime}`
              break;
            case 2:
              this.wxappQuery = `workType=2&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.topData.signColId}&curId=${this.topData.hwId}`
              //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
              break;
            case 3:
              this.wxappQuery = `workType=3&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.topData.signColId}&curId=${this.topData.hwId}`
              //闯关打卡
              break;
          }
          this.wechatShare();
        }
      );
    },
    handleLaunch(e) {
        console.log('handleLaunch---', e)
        // this.$emit('handleLaunch')
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    sureSearch(selectItemTime, selectItemsort, starTime, endTime, classId, hwId) {
      if (this.workType == 1) {
        if (selectItemTime == '全部主题') {
          this.day = ''
        } else {
          this.day = selectItemTime
        }
      }
      this.page = 1; //页数
      this.sortType = selectItemsort; //是否点评 1已点评 2未点评 3精选 4非精选
      this.startTime = starTime; //开始时间
      this.endTime = endTime; //结束时间
      this.classId = classId; //分组id
      this.hwId = hwId
      this.studentWorkList = [];
      this.$store.commit('updateClockCalendar', '');
      this.studentList()
    },
    // 获取头部打卡信息/api/signCard/studentList
    // signColId打卡Id
    // day	是打卡z主题日期
    // limit每页限制个数
    // sortType是否点评 1已点评 2未点评 3精选 4非精选
    // sort1打卡时间降序 2打卡升序 3被点评数降序 4被点评升序  5被点赞数降序 6被点赞数升序
    // type1已打卡 2未打卡学员
    // startTime开始时间
    // endTime结束时间
    // classId分组id
    // searchType搜索类型 1=用户 2=打卡内容
    // searchName搜索的内容
    studentListAll(day) {
      this.page = 1; //页数
      this.day = day || ''; //是打卡主题日期,
      this.sortType = ''; //是否点评 1已点评 2未点评 3精选 4非精选
      this.sort = ''; //1打卡时间降序 2打卡升序 3被点评数降序 4被点评升序  5被点赞数降序 6被点赞数升序
      this.type = ''; //1已打卡 2未打卡学员
      this.startTime = ''; //开始时间
      this.endTime = ''; //结束时间
      this.classId = ''; //分组id
      this.searchType = ''; //搜索类型 1=用户 2=打卡内容
      this.searchName = ''; //搜索的内容
      this.studentWorkList = [];
      this.hwId = ''
      this.dataStatus = "HAS_MORE_DATA";
      this.studentList()
    },
    studentList() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      let getUrl = `signCard/studentList?signColId=${this.clockInId}&day=${this.day}&limit=${LIMIT}&page=${this.page}&sortType=${this.sortType}&sort=${this.sort}&type=${this.type}
      &startTime=${this.startTime}&hwId=${this.hwId}&endTime=${this.endTime}&classId=${this.classId}&searchType=${this.searchType}&searchName=${this.searchName}`
      utilJs.getMethod(
        global.apiurl + getUrl,
        (res) => {
          if (this.page == 1) {
            this.studentWorkList = res.studentList.data
          } else {
            this.studentWorkList = [...this.studentWorkList, ...res.studentList.data];
          }
          if (res.studentList.data && (res.studentList.data.length < LIMIT)) {
            this.dataStatus = this.page == 1 && res.studentList.data.length == 0 ? "NO_DATA" : "NO_MORE_DATA";
          } else {
            this.dataStatus = "HAS_MORE_DATA";
            this.page++;
          }
          this.$nextTick(() => {
            console.log(this.curScollTop, '实际', 'scrollHeight' + document.body.scrollHeight, this.page)
            window.scrollTo(0, this.curScollTop);
            let clientHeight = document.body.clientHeight && document.documentElement.clientHeight ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            if (!this.curScollTopFlag && this.curScollTop + clientHeight <= (document.body.scrollHeight)) {
              this.curScollTopFlag = true
            }
          })
        },
        (failRes) => {
          this.dataStatus = "DATA_ERROR";
        }
      );
    },
    //评论成功
    commentSuccess(comData, type) {
      let content = {
        type: comData.type,
        content: comData.content,
        nickname: comData.nickname,
        replyName: this.replyName,
        replyUserId: this.replyId,
        userId: this.topData.userId,
        imgArr: comData.imgArr,
        audioArr: comData.audioArr,
        videoArr: comData.videoArr || [],
        headimgurl:comData.headimgurl,
        commentId:comData.commentId,
        encodeUserId:localStorage.getItem("userId"),
        createdAt:comData.commentTime,
      };
      //评论别人
      if (comData.teacherCom) {
        //老师点评
        this.$set(this.studentWorkList[curComIndex], "isHot", comData.isHot);
        this.$set(this.studentWorkList[curComIndex], "isTop", comData.isTop);
        this.$set(this.studentWorkList[curComIndex], "rank", comData.rank);
        // this.$set(this.studentWorkList[curComIndex], "createdAt", comData.commentTime);
      }
      if (comData.teacherCom && this.sortType == 5) {
        //老师点评，当前类型是未点评，则把当前点评的这条数据移除掉
        this.studentWorkList.splice(curComIndex, 1);
      } else {
        this.studentWorkList[curComIndex].commentArr.push(content);
      }
      this.commentId = content.commentId
      this.showTeaCommentModal = false;
      this.showComInput = false;
      this.replyName = "";
      this.inputCom = "";
      this.replyId = "";
      if (type == 1) {
        if (this.$store.state.oem_store.clockCalendar) {
          // this.getCurYearMonth(this.$store.state.oem_store.clockCalendar)
          let newUrl = `${
            window.location.href.split("#")[0]
            }#/homePage/clockIn/teaHomeWorker?clockInId=${this.clockInId}`;
          //解决进入排行榜，学习记录，邀请卡的时候回来导致页面是第一次进来的作业
          history.replaceState("teaHomeWorker", "", newUrl);
          this.studentListAll(this.$store.state.oem_store.clockCalendar.date);
        } else {
          this.studentListAll();
        }
        return
      }
    },
    //点赞
    clickZan(index, myAswerIndex) {
      if (isLoading) {
        return;
      }
      isLoading = true;
      //点赞自己
      let zanType = 0;
      let examMainId = "";
        zanType = this.studentWorkList[index].hasZan == 1 ? 2 : 1;
        examMainId = this.studentWorkList[index].examMainId;

      utilJs.getMethod(
        `${global.apiurl}signCard/clickZan/${examMainId}?zanType=${zanType}`,
        (res) => {
          isLoading = false;
          if (res.status == 1) {
            this.$showCjToast({
              text: zanType == 1 ? "点赞成功" : "取消点赞",
              type: "success",
              time: 1500
            });
              //点赞别人
              this.$set(
                this.studentWorkList[index],
                "hasZan",
                zanType == 2 ? 0 : 1
              );
              if (zanType == 1) {
                this.studentWorkList[index].zanMan.push({
                  nickname: res.nickname,
                  userId:res.userId
                });
              } else {
                let zanArr = this.studentWorkList[index].zanMan.filter((item) => {
                  return item.userId != res.userId;
                });
                this.$set(this.studentWorkList[index], "zanMan", zanArr);
              }
          } else if (res.status == 2) {
            this.$showCjToast({
              text: res.message,
              type: "warn",
              time: 1500
            });
          } else {
            this.$showCjToast({
              text: '操作失败',
              type: "warn",
              time: 1500
            });
          }
        },
        (failRes) => {
          isLoading = false;
        }
      );
    },
    /**
     * 点击评论
     * index： -1 评论自己，其他:评论别人
     * cIndex： -1 评论别人的内容，其他：评论别人的评论
     */
    clickCom(index, cIndex, commentId, myAswerIndex) {
    console.log(index, cIndex, this.topData.isTeacher, 'teaclickCom')
      if (index != -1 && cIndex == -1 && this.topData.isTeacher == 1) {
        curComIndex = index;
        this.resultInfo = this.studentWorkList[index];
        this.resultIndex = index;
        this.showTeaCommentModal = true;
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        this.enHwId = this.studentWorkList[index].hwId
        this.enDate = this.studentWorkList[index].startDay
        return;
      }
      console.log(index, cIndex)
      this.commentId = commentId
      let examMainId = "";
        //点击别人的评论
      if (cIndex != -1) {
        this.comType = this.studentWorkList[index].commentArr[cIndex].type;
      }
      examMainId = this.studentWorkList[index].examMainId;
      this.replyId =
        cIndex == -1
          ? ""
          : this.studentWorkList[index].commentArr[cIndex].userId;
      this.replyName =
        cIndex == -1
          ? ""
          : this.studentWorkList[index].commentArr[cIndex].nickname;
      curComIndex = index;
      if (this.curComId != examMainId) {
        this.inputCom = "";
      }
      this.enHwId = this.studentWorkList[index].hwId
      this.enDate = this.studentWorkList[index].startDay
      this.curComId = examMainId;
      this.showComInput = true;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        //document.getElementById("audio").play();
        utilJs.audioPlayFun(document.getElementById("audio"), "play");
      }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    // 跳转打卡详情页
    clickGoClockDetail() {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/clockInDetail",
        query: {
          clockInId: this.clockInId
        }
      });
    },
    //讲师切换身份 1 讲师 2 学员
    clickChangeRole() {
      let postData = {
        signColId: this.clockInId,
        idType: this.topData.isTeacher == 1 ? 0 : 1 // 1：教师端 0：学生端
      };
      utilJs.postMethod(
        global.apiurl + "signCard/switchId",
        postData,
        (res) => {
          switch (this.workType) {
            case 1:
              //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
              let startTimeTamp = new Date(`${this.topData.startTime} ${this.topData.startHour}`.replace(/-/g, "/")).getTime();
              let endTimeTamp = new Date(`${this.topData.endTime} ${this.topData.endHour}`.replace(/-/g, "/")).getTime();
              let nowTimeTamp = new Date().getTime();
              let curTime = utilJs.dateFormat(nowTimeTamp);
              if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
                curTime = this.topData.startTime;
              }
              this.$routerGo(this, "replace", {
                path: `/homePage/clockIn/stuHomeWork?workType=1&clockInId=${this.clockInId}&curDate=${curTime}`
              });
              break;
            case 2:
              //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
              let nextUrl = `/homePage/clockIn/stuHomeWork?clockInId=${this.clockInId}`;
              this.$routerGo(this, "replace", {
                path: nextUrl
              });
              break;
            case 3:
              //闯关打卡
              this.$routerGo(this, "replace", {
                path: `/homePage/clockIn/stuHomeWork?workType=3&clockInId=${this.clockInId}&curId=${this.topData.nextHwId}`
              });
              break;
          }
        }
      );
    },
    //邀请好友
    clickInviteFriend() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: {
          ckFrom: global.ckFrom.clockIn,
          cId: 0,
          extId: this.clockInId
        }
      });
    },
    //进入日历
    clickGoCalendar() {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/clockCalendar",
        query: {
          clockInId: this.clockInId
        }
      });
    },
    //进入统计
    clickGoTottal() {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/clockInTottal",
        query: {
          clockInId: this.clockInId
        }
      });
    },
    //排行榜
    clickGoRank() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/rankList",
        query: {
          clockId: this.clockInId,
          setScore: 1,
          type: this.workType
        }
      });
    },
    clockSearchShow() {
      this.isShowClockSearch = true
    },
    clockSearchHide() {
      this.isShowClockSearch = false
    },
    tabtag(index) {
      this.tabIndex = index
      if (this.tabIndex == 0) {
        this.studentListAll();
      } else if (this.tabIndex == 1) {
        this.getHomeWorkListAll()
      } else if (this.tabIndex == 2) {
        this.pupilListAll()
      }
      if (document.getElementById("audio")) {
        document.getElementById("audio").src = "";
      }
    },
    getHomeWorkListAll() {
      this.page = 1
      this.dataStatus = "HAS_MORE_DATA";
      this.getHomeWorkList()
    },
    pupilListAll() {
      this.page = 1
      this.dataStatus = "HAS_MORE_DATA";
      this.signCardPupilList()
    },
    //成员列表
    signCardPupilList() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      utilJs.getMethod(
        `${global.apiurl}signCard/pupilList/${this.clockInId}?limit=${LIMIT}&page=${this.page}`,
        (res) => {
          if (this.page == 1) {
            this.pupilList = res.data
          } else {
            this.pupilList = [...this.pupilList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = this.page == 1 && res.data.length == 0 ? "NO_DATA" : "NO_MORE_DATA";
          } else {
            this.dataStatus = "HAS_MORE_DATA";
            this.page++;
          }
        },
        (failRes) => {
          this.dataStatus = "DATA_ERROR";
        }
      );
    },
    startSearch(searchText) {
      this.searchName = searchText.searchValue;
      let si = searchText.selectItem;
      this.page = 1;
      if (si == "昵称") {
        this.searchType = 1
      } else if (si == "内容") {
        this.searchType = 2
      }
      this.studentList();
    },
    goStuAnswerResult(info) {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/stuShortAnswerResult",
        query: {
          clockInId: this.clockInId,
          // curHwId : this.homeWorkInfo.hwId,
          stuHwId:info.hwId,
          curSelectDate:info.startDay,
          examMainId: info.examMainId,
          totalNum:info.type == 3 ? info.aiNum : 0
        }
      });
    },
    // searchAll() {
    //   this.studentListAll();
    // },
    //分享
    wechatShare() {
      let title = this.topData.shareTitle;
      let shareImg = this.topData.sharePic;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${this.clockInId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.topData.shareDesc || "点击查看详情";
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      localStorage.setItem("homeWorkShareInfo", JSON.stringify(shareData));
      utilJs.wechatConfig(
        shareUrl,
        title,
        shareImg,
        shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare() {
      let title = this.topData.name;
      let shareImg = this.topData.sharePic;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${this.clockInId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.topData.shareDesc || "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction() {
      console.log(this.curScollTopFlag, 'curScollTop' + this.curScollTop, 'scrollHeight' + document.body.scrollHeight, '实时1')
      if (this.curScollTopFlag && this.tabIndex == 0) {
        let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
        this.curScollTop = scrollTop;
      }
      console.log(this.curScollTopFlag, 'curScollTop' + this.curScollTop, 'scrollHeight' + document.body.scrollHeight, '实时2')
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA') {
          if (this.tabIndex == 0) {
            console.log(this.page, '是否执行')
            this.studentList();
          } else if (this.tabIndex == 1) {
            if (this.workType == 1 || this.workType == 2) {
              this.getHomeWorkList()
            } else {
              this.getLevelList()
            }
          } else if (this.tabIndex == 2) {
            this.signCardPupilList();
          }
        }
      });
    },
    getCurYearMonth(date) {
      const arr = date.split('-')
      const year = arr[0]
      const month = arr[1]
      this.curSelectYearMonth = year + '年' + month + '月'
    },
    getHomeWorkList() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      utilJs.getMethod(
        global.apiurl +
          "signCard/homeworkList/" +
          this.clockInId +
          "?page=" +
          this.page,
        (res) => {
          for (let item of res.detailData.data) {
            item.startTime = utilJs.changeTimeUtil(item.startTime);
            item.endTime = utilJs.changeTimeUtil(item.endTime);
          }
          if (this.page == 1) {
            this.mainData = res.mainData;
            this.homeWorkList = res.detailData.data;
          } else {
            this.homeWorkList = [...this.homeWorkList, ...res.detailData.data];
          }
          if (res.detailData.to * 1 == res.detailData.total * 1) {
            this.dataStatus = res.detailData.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
          } else {
            this.dataStatus = "HAS_MORE_DATA";
            this.page++;
          }
          // this.$nextTick(() => {
          //   window.scrollTo(0, this.curScollTop);
          //   if (this.curScollTop == (document.documentElement.scrollTop || document.body.scrollTop)) {
          //     this.curScollTopFlag = true
          //   }
          // })
        },
        (failRes) => {
          this.dataStatus = "DATA_ERROR";
        }
      );
    },
    getLevelList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}signCard/blockadeList/${this.clockInId}?page=${this.page}&limit=${LIMIT}`,
        res => {
          if (this.page == 1) {
            this.homeWorkList = res.dataList.data;
          } else {
            this.homeWorkList = [...this.homeWorkList, ...res.dataList.data];
          }
          if (res.dataList.to * 1 == res.dataList.total * 1) {
            this.dataStatus = res.dataList.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            this.page++;
          }
          // this.$nextTick(() => {
          //   window.scrollTo(0, this.curScollTop);
          //   if (this.curScollTop == (document.documentElement.scrollTop || document.body.scrollTop)) {
          //     this.curScollTopFlag = true
          //   }
          // })
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
  },
  activated() {
    this.showAialogPop = false
    setDocumentTitle("打卡");// eslint-disable-line
    this.dataStatus = 'HAS_MORE_DATA';
    if (document.getElementById("audio")) {
      document.getElementById("audio").src = "";
    }
    this.playAduioSrc = "";
    this.clockInId = this.$route.query.clockInId
    hasRead = this.$route.query.hasRead || "";
    this.tabIndex = 0
    console.log(this.$store.state.oem_store.clockCalendar)
    if (this.$store.state.oem_store.clockCalendar) {
      // this.getCurYearMonth(this.$store.state.oem_store.clockCalendar)
      let newUrl = `${
        window.location.href.split("#")[0]
        }#/homePage/clockIn/teaHomeWorker?clockInId=${this.clockInId}`;
      //解决进入排行榜，学习记录，邀请卡的时候回来导致页面是第一次进来的作业
      history.replaceState("teaHomeWorker", "", newUrl);
      this.studentListAll(this.$store.state.oem_store.clockCalendar.date);
    } else {
      this.studentListAll();
    }
    this.topDetail();
    this.getBaseConfig()
    getBindPhoneSetting(global.ckFrom.clockIn).then(res => {
      this.bindPhoneSetting = res;
    });
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        this.imgData = res;
      });
    }
    window.addEventListener('scroll', this.windowScrollFunction);
    //解决ios播放没声音
    this.$nextTick(function () {
      try {
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener(
              "WeixinJSBridgeReady",
              function () {
                document.getElementById("audio").play();
              },
              false
            );
          } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", function () {
              document.getElementById("audio").play();
            });
            document.attachEvent("onWeixinJSBridgeReady", function () {
              document.getElementById("audio").play();
            });
          }
          WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
            // eslint-disable-line
            // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
            document.getElementById("audio").play();
            console.log(
              "WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge"
            );
          });
        }
      } catch (error) {
        // continue regardless of error
      }
    });
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    this.curScollTopFlag = false
    this.playAduioSrc = "";
    if (document.getElementById("audio")) {
      document.getElementById("audio").src = "";
    }
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.teaHeadbg {
  background: url("../../../assets/i/wap/clockIn/teaHeadBg.png");
  background-size: cover;
}
.c-ml-4{
  margin-left: -0.4rem ;
}
.timeEnd{
  top: -0.3rem;
  right: -0.3rem;
}
.changeRole {
  position: fixed;
  bottom: 2rem;
  right: 0;
  /* background: #FE7900; */
  /* box-shadow: 0 2px 4px 0 rgba(254,121,0,0.30); */
  border-radius: 2.5rem 0 0 2.5rem;
}
.c-p-b-6{
  bottom: -0.15rem;
}
.c-pv14 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.c-lh52 {
  line-height: 1.3rem;
}
.open-tag-wrap {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
}
.launch-btn {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.onlyIcon{
  left: -0.26rem;
  top: -0.5rem;
}
</style>
